<template>
  <div id="app">

        <!--banner-->
        <!--1倍宽-->
        <SideNavgation/>
        <MySwiper/>
        <!--banner end-->

        <!--nav selector-->
        <div class="selector-wrapper">
            <div class="wrapper city-selector-wrapper">
                <div class="title">城市:</div>
                <div class="selector-content">
                    <ul class="city-list">
                        <li class="first active city-item">全国</li>
                        <li class="city-item">上海</li>
                        <li class="more" @click="showCity">
                            <a id="moreCity" href="javascript:;">
                                <span class="moreCity">更多城市<i class="fa fa-angle-down"></i></span>
                                <span class="moreCityName"></span>
                            </a>
                            <div class="more-city-wrapper" :style="{display: isShow ? 'block' : 'none'}">
                                <div class="more-city-letter-list">
                                    <ul>
                                        <li data-n="1" class="active"><a href="#">ABCD</a></li>
                                        <li data-n="2"><a href="#">EFGH</a></li>
                                        <li data-n="3"><a href="#">JKLM</a></li>
                                        <li data-n="4"><a href="#">NOPQRS</a></li>
                                        <li data-n="5"><a href="#">TWXYZ</a></li>
                                    </ul> 
                                </div>
                                <div class="more-city-list">
                                    <ul  data-n="1">
                                        <li><a href="#">安徽省</a></li>
                                        <li><a href="#">阿拉善盟</a></li>
                                        <li><a href="#">鞍山市</a></li>
                                        <li><a href="#">安庆市</a></li>
                                        <li><a href="#">安阳市</a></li>
                                        <li><a href="#">阿坝</a></li>
                                        <li><a href="#">安顺市</a></li>
                                        <li><a href="#">阿里地区</a></li>
                                        <li><a href="#">安康市</a></li>
                                        <li><a href="#">阿克苏地区</a></li>
                                        <li><a href="#">阿勒泰地区</a></li>
                                        <li><a href="#">阿拉尔市</a></li>
                                        <li><a href="#">澳门</a></li>
                                        <li><a href="#">北京市</a></li>
                                        <li><a href="#">保定市</a></li>
                                        <li><a href="#">包头市</a></li>
                                        <li><a href="#">巴彦淖尔市</a></li>
                                        <li><a href="#">本溪市</a></li>
                                        <li><a href="#">白山市</a></li>
                                        <li><a href="#">白城市</a></li>
                                        <li><a href="#">蚌埠市</a></li>
                                        <li><a href="#">亳州市</a></li>
                                        <li><a href="#">滨州市</a></li>
                                        <li><a href="#">北海市</a></li>
                                        <li><a href="#">百色市</a></li>
                                        <li><a href="#">白沙</a></li>
                                        <li><a href="#">保亭</a></li>
                                        <li><a href="#">巴中市</a></li>
                                        <li><a href="#">毕节市</a></li>
                                        <li><a href="#">保山市</a></li>
                                        <li><a href="#">宝鸡市</a></li>
                                        <li><a href="#">白银市</a></li>
                                        <li><a href="#">博州</a></li>
                                        <li><a href="#">巴州</a></li>
                                        <li><a href="#">北屯市</a></li>
                                        <li><a href="#">承德市</a></li>
                                        <li><a href="#">沧州市</a></li>
                                        <li><a href="#">长治市</a></li>
                                        <li><a href="#">赤峰市</a></li>
                                        <li><a href="#">朝阳市</a></li>
                                        <li><a href="#">长春市</a></li>
                                        <li><a href="#">常州市</a></li>
                                        <li><a href="#">滁州市</a></li>
                                        <li><a href="#">池州市</a></li>
                                        <li><a href="#">长沙市</a></li>
                                        <li><a href="#">常德市</a></li>
                                        <li><a href="#">郴州市</a></li>
                                        <li><a href="#">潮州市</a></li>
                                        <li><a href="#">崇左市</a></li>
                                        <li><a href="#">澄迈县</a></li>
                                        <li><a href="#">昌江</a></li>
                                        <li><a href="#">重庆市</a></li>
                                        <li><a href="#">成都市</a></li>
                                        <li><a href="#">楚雄</a></li>
                                        <li><a href="#">昌都市</a></li>
                                        <li><a href="#">昌吉</a></li>
                                        <li><a href="#">大同市</a></li>
                                        <li><a href="#">大连市</a></li>
                                        <li><a href="#">丹东市</a></li>
                                        <li><a href="#">大庆市</a></li>
                                        <li><a href="#">大兴安岭</a></li>
                                        <li><a href="#">东营市</a></li>
                                        <li><a href="#">德州市</a></li>
                                        <li><a href="#">东莞市</a></li>
                                        <li><a href="#">儋州市</a></li>
                                        <li><a href="#">东方市</a></li>
                                        <li><a href="#">定安县</a></li>
                                        <li><a href="#">德阳市</a></li>
                                        <li><a href="#">达州市</a></li>
                                        <li><a href="#">大理</a></li>
                                        <li><a href="#">德宏</a></li>
                                        <li><a href="#">迪庆</a></li>
                                        <li><a href="#">定西市</a></li>
                                    </ul>
                                    <ul  data-n="2">
                                        <li><a href="#">福建省</a></li>
                                        <li><a href="#">广东省</a></li>
                                        <li><a href="#">广西</a></li>
                                        <li><a href="#">贵州省</a></li>
                                        <li><a href="#">甘肃省</a></li>
                                        <li><a href="#">河北省</a></li>
                                        <li><a href="#">黑龙江省</a></li>
                                        <li><a href="#">河南省</a></li>
                                        <li><a href="#">湖北省</a></li>
                                        <li><a href="#">湖南省</a></li>
                                        <li><a href="#">海南省</a></li>
                                        <li><a href="#">鄂尔多斯市</a></li>
                                        <li><a href="#">鄂州市</a></li>
                                        <li><a href="#">恩施</a></li>
                                        <li><a href="#">抚顺市</a></li>
                                        <li><a href="#">阜新市</a></li>
                                        <li><a href="#">阜阳市</a></li>
                                        <li><a href="#">福州市</a></li>
                                        <li><a href="#">抚州市</a></li>
                                        <li><a href="#">佛山市</a></li>
                                        <li><a href="#">防城港市</a></li>
                                        <li><a href="#">赣州市</a></li>
                                        <li><a href="#">广州市</a></li>
                                        <li><a href="#">桂林市</a></li>
                                        <li><a href="#">贵港市</a></li>
                                        <li><a href="#">广元市</a></li>
                                        <li><a href="#">广安市</a></li>
                                        <li><a href="#">甘孜</a></li>
                                        <li><a href="#">贵阳市</a></li>
                                        <li><a href="#">甘南</a></li>
                                        <li><a href="#">果洛</a></li>
                                        <li><a href="#">固原市</a></li>
                                        <li><a href="#">高雄市</a></li>
                                        <li><a href="#">邯郸市</a></li>
                                        <li><a href="#">衡水市</a></li>
                                        <li><a href="#">呼和浩特市</a></li>
                                        <li><a href="#">呼伦贝尔市</a></li>
                                        <li><a href="#">葫芦岛市</a></li>
                                        <li><a href="#">哈尔滨市</a></li>
                                        <li><a href="#">鹤岗市</a></li>
                                        <li><a href="#">黑河市</a></li>
                                        <li><a href="#">淮安市</a></li>
                                        <li><a href="#">杭州市</a></li>
                                        <li><a href="#">湖州市</a></li>
                                        <li><a href="#">合肥市</a></li>
                                        <li><a href="#">淮南市</a></li>
                                        <li><a href="#">淮北市</a></li>
                                        <li><a href="#">黄山市</a></li>
                                        <li><a href="#">菏泽市</a></li>
                                        <li><a href="#">鹤壁市</a></li>
                                        <li><a href="#">黄石市</a></li>
                                        <li><a href="#">黄冈市</a></li>
                                        <li><a href="#">衡阳市</a></li>
                                        <li><a href="#">怀化市</a></li>
                                        <li><a href="#">惠州市</a></li>
                                        <li><a href="#">河源市</a></li>
                                        <li><a href="#">贺州市</a></li>
                                        <li><a href="#">河池市</a></li>
                                        <li><a href="#">海口市</a></li>
                                        <li><a href="#">红河</a></li>
                                        <li><a href="#">汉中市</a></li>
                                        <li><a href="#">海东市</a></li>
                                        <li><a href="#">海北</a></li>
                                        <li><a href="#">黄南海</a></li>
                                        <li><a href="#">南海西</a></li>
                                        <li><a href="#">哈密市</a></li>
                                        <li><a href="#">和田地区</a></li>
                                        <li><a href="#">花莲县</a></li>
                                        <li><a href="#">海外</a></li>
                                    </ul>
                                    <ul  data-n="3">
                                        <li><a href="#">吉林省</a></li>
                                        <li><a href="#">江苏省</a></li>
                                        <li><a href="#">江西省</a></li>
                                        <li><a href="#">辽宁省</a></li>
                                        <li><a href="#">晋城市</a></li>
                                        <li><a href="#">晋中市</a></li>
                                        <li><a href="#">锦州市</a></li>
                                        <li><a href="#">吉林市</a></li>
                                        <li><a href="#">鸡西市</a></li>
                                        <li><a href="#">佳木斯市</a></li>
                                        <li><a href="#">嘉兴市</a></li>
                                        <li><a href="#">金华市</a></li>
                                        <li><a href="#">景德镇市</a></li>
                                        <li><a href="#">九江市</a></li>
                                        <li><a href="#">吉安市</a></li>
                                        <li><a href="#">济南市</a></li>
                                        <li><a href="#">济宁市</a></li>
                                        <li><a href="#">焦作市</a></li>
                                        <li><a href="#">济源市</a></li>
                                        <li><a href="#">荆门市</a></li>
                                        <li><a href="#">荆州市</a></li>
                                        <li><a href="#">江门市</a></li>
                                        <li><a href="#">揭阳市</a></li>
                                        <li><a href="#">嘉峪关市</a></li>
                                        <li><a href="#">金昌市</a></li>
                                        <li><a href="#">酒泉市</a></li>
                                        <li><a href="#">基隆市</a></li>
                                        <li><a href="#">嘉义市</a></li>
                                        <li><a href="#">嘉义县</a></li>
                                        <li><a href="#">开封市</a></li>
                                        <li><a href="#">昆明市</a></li>
                                        <li><a href="#">克拉玛依市</a></li>
                                        <li><a href="#">克州喀什地区</a></li>
                                        <li><a href="#">可克达拉市</a></li>
                                        <li><a href="#">昆玉市</a></li>
                                        <li><a href="#">廊坊市</a></li>
                                        <li><a href="#">临汾市</a></li>
                                        <li><a href="#">吕梁市</a></li>
                                        <li><a href="#">辽阳市</a></li>
                                        <li><a href="#">辽源市</a></li>
                                        <li><a href="#">连云港市</a></li>
                                        <li><a href="#">丽水市</a></li>
                                        <li><a href="#">六安市</a></li>
                                        <li><a href="#">龙岩市</a></li>
                                        <li><a href="#">莱芜市</a></li>
                                        <li><a href="#">临沂市</a></li>
                                        <li><a href="#">聊城市</a></li>
                                        <li><a href="#">洛阳市</a></li>
                                        <li><a href="#">漯河市</a></li>
                                        <li><a href="#">娄底市</a></li>
                                        <li><a href="#">柳州市</a></li>
                                        <li><a href="#">来宾市</a></li>
                                        <li><a href="#">临高县</a></li>
                                        <li><a href="#">乐东</a></li>
                                        <li><a href="#">陵水</a></li>
                                        <li><a href="#">泸州市</a></li>
                                        <li><a href="#">乐山市</a></li>
                                        <li><a href="#">凉山</a></li>
                                        <li><a href="#">六盘水市</a></li>
                                        <li><a href="#">丽江市</a></li>
                                        <li><a href="#">临沧市</a></li>
                                        <li><a href="#">拉萨市</a></li>
                                        <li><a href="#">林芝市</a></li>
                                        <li><a href="#">兰州市</a></li>
                                        <li><a href="#">陇南市</a></li>
                                        <li><a href="#">临夏</a></li>
                                        <li><a href="#">牡丹江市</a></li>
                                        <li><a href="#">马鞍山市</a></li>
                                        <li><a href="#">茂名市</a></li>
                                        <li><a href="#">梅州市</a></li>
                                        <li><a href="#">绵阳市</a></li>
                                        <li><a href="#">眉山市</a></li>
                                        <li><a href="#">苗栗县</a></li>
                                    </ul>
                                    <ul  data-n="4">
                                        <li><a href="#">上海市</a></li>
                                        <li><a href="#">苏州市</a></li>
                                        <li><a href="#">宿迁市</a></li>
                                        <li><a href="#">绍兴市</a></li>
                                        <li><a href="#">宿州市</a></li>
                                        <li><a href="#">三明市</a></li>
                                        <li><a href="#">上饶市</a></li>
                                        <li><a href="#">三门峡市</a></li>
                                        <li><a href="#">商丘市</a></li>
                                        <li><a href="#">十堰市</a></li>
                                        <li><a href="#">随州市</a></li>
                                        <li><a href="#">神农架林区</a></li>
                                        <li><a href="#">邵阳市</a></li>
                                        <li><a href="#">韶关市</a></li>
                                        <li><a href="#">深圳市</a></li>
                                        <li><a href="#">汕头市</a></li>
                                        <li><a href="#">汕尾市</a></li>
                                        <li><a href="#">三亚市</a></li>
                                        <li><a href="#">三沙市</a></li>
                                        <li><a href="#">遂宁市</a></li>
                                        <li><a href="#">山南市</a></li>
                                        <li><a href="#">商洛市</a></li>
                                        <li><a href="#">石嘴山市</a></li>
                                        <li><a href="#">双河市</a></li>
                                        <li><a href="#">石河子市</a></li>
                                    </ul>
                                    <ul  data-n="5">
                                        <li><a href="#">台湾省</a></li>
                                        <li><a href="#">西藏自治区</a></li>
                                        <li><a href="#">新疆</a></li>
                                        <li><a href="#">云南省</a></li>
                                        <li><a href="#">浙江省</a></li>
                                        <li><a href="#">天津市</a></li>
                                        <li><a href="#">唐山市</a></li>
                                        <li><a href="#">太原市</a></li>
                                        <li><a href="#">通辽市</a></li>
                                        <li><a href="#">铁岭市</a></li>
                                        <li><a href="#">通化市</a></li>
                                        <li><a href="#">泰州市</a></li>
                                        <li><a href="#">台州市</a></li>
                                        <li><a href="#">铜陵市</a></li>
                                        <li><a href="#">泰安市</a></li>
                                        <li><a href="#">天门市</a></li>
                                        <li><a href="#">屯昌县</a></li>
                                        <li><a href="#">铜仁市</a></li>
                                        <li><a href="#">铜川市</a></li>
                                        <li><a href="#">天水市</a></li>
                                        <li><a href="#">吐鲁番市</a></li>
                                        <li><a href="#">塔城地区</a></li>
                                        <li><a href="#">图木舒克市</a></li>
                                        <li><a href="#">铁门关市</a></li>
                                        <li><a href="#">台北市</a></li>
                                    </ul>
                                </div>
                            </div>
                            
                        </li>
                    </ul>
                </div>
            </div>
            <div class="wrapper type-selector-wrapper">
                <div class="title">类型:</div>
                <div class="selector-content">
                    <ul class="city-list">
                        <li class="first active type-item"><a href="#">全部类型</a></li>
                        <li class="type-item">
                            <a href="#">
                                <span>动漫嘉年华</span>
                                <span>(493)</span>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="#">
                                <span>其他展览</span>
                                <span>(110)</span>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="#">
                                <span>音乐会</span>
                                <span>(97)</span>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="#">
                                <span>演唱会</span>
                                <span>(75)</span>
                            </a>
                        </li>
                        <li class="type-item">
                            <a href="#">
                                <span>舞台剧</span>
                                <span>(44)</span>
                            </a>
                        </li>
                        <li class="more">
                            <a id="moreType" href="#">
                                <span class="moreType" style="display:none">更多类型<i class="fa fa-angle-down"></i></span>
                                <span class="moreTypeName"></span>
                            </a>
                            <div class="more-type-wrapper">
                                <div class="more-type-list">
                                    <ul>
                                        <li>
                                            <a href="#">
                                                <span>主题漫展</span>
                                                <span>(26)</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span>其他演出</span>
                                                <span>(20)</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span>电子游戏展</span>
                                                <span></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="wrapper order-selector-wrapper">
                <div class="title">筛选:</div>
                <div class="selector-content">
                    <ul class="city-list">
                        <li class="first active selector-item"><a href="#">全部时间</a></li>
                        <li class="selector-item"><a href="#">本周</a></li>
                        <li class="selector-item"><a href="#">本月</a></li>
                        <li class="selector-item"><a href="#"><span>三个月内</span></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--nav selector end-->

        <!--content-->
        <div class="project-list-wrapper">
            <ul class="project-list">
                <li class="project-list-item">
                    <div class="project-list-item-img" style="background-image: url(https://img0.baidu.com/it/u=1424775485,4098222647&fm=26&fmt=auto&gp=0.jpg); background-size:cover"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">上海·COMICUP24 魔都同人祭</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            2019.06.07 - 06.08
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">上海市</span>
                            <span class="venue-name-and-address">国家会展中心（上海）</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">56</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="project-list-item">
                    <div class="project-list-item-img" style="background-image: url(https://img0.baidu.com/it/u=1424775485,4098222647&fm=26&fmt=auto&gp=0.jpg); background-size:cover"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">上海·COMICUP24 魔都同人祭</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            2019.06.07 - 06.08
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">上海市</span>
                            <span class="venue-name-and-address">国家会展中心（上海）</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">56</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="project-list-item">
                    <div class="project-list-item-img" style="background-image: url(https://img0.baidu.com/it/u=1424775485,4098222647&fm=26&fmt=auto&gp=0.jpg); background-size:cover"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">上海·COMICUP24 魔都同人祭</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            2019.06.07 - 06.08
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">上海市</span>
                            <span class="venue-name-and-address">国家会展中心（上海）</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">56</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="project-list-item">
                    <div class="project-list-item-img" style="background-image: url(https://img0.baidu.com/it/u=1424775485,4098222647&fm=26&fmt=auto&gp=0.jpg); background-size:cover"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">上海·COMICUP24 魔都同人祭</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            2019.06.07 - 06.08
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">上海市</span>
                            <span class="venue-name-and-address">国家会展中心（上海）</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">56</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="project-list-item">
                    <div class="project-list-item-img" style="background-image: url(https://img0.baidu.com/it/u=1424775485,4098222647&fm=26&fmt=auto&gp=0.jpg); background-size:cover"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">上海·COMICUP24 魔都同人祭</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            2019.06.07 - 06.08
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">上海市</span>
                            <span class="venue-name-and-address">国家会展中心（上海）</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">56</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="project-list-item">
                    <div class="project-list-item-img" style="background-image: url(https://img0.baidu.com/it/u=1424775485,4098222647&fm=26&fmt=auto&gp=0.jpg); background-size:cover"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">上海·COMICUP24 魔都同人祭</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            2019.06.07 - 06.08
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">上海市</span>
                            <span class="venue-name-and-address">国家会展中心（上海）</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">56</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="project-list-item">
                    <div class="project-list-item-img" style="background-image: url(https://img0.baidu.com/it/u=1424775485,4098222647&fm=26&fmt=auto&gp=0.jpg); background-size:cover"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">上海·COMICUP24 魔都同人祭</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            2019.06.07 - 06.08
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">上海市</span>
                            <span class="venue-name-and-address">国家会展中心（上海）</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">56</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="project-list-item">
                    <div class="project-list-item-img" style="background-image: url(https://img0.baidu.com/it/u=1424775485,4098222647&fm=26&fmt=auto&gp=0.jpg); background-size:cover"></div>
                    <div class="project-list-item-detail">
                        <div class="project-list-item-title">上海·COMICUP24 魔都同人祭</div>
                        <div class="project-list-item-time">
                            <span class="fa fa-calendar"></span>
                            2019.06.07 - 06.08
                        </div>
                        <div class="project-list-item-address">
                            <span class="fa fa-map-marker"></span>
                            <span class="city-name">上海市</span>
                            <span class="venue-name-and-address">国家会展中心（上海）</span>
                        </div>
                        <div class="project-list-item-price">
                            <div class="not-free">
                                <span class="price-symbol">¥</span>
                                <span class="price">56</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!--content end-->

        <!--分页按钮-->
        <Pagination/>
        <!--分页按钮 end-->

        <!--建议 返回顶部-->
        <div class="toolbar-wrapper">
            <div class="left-slider-wrapper">
                <a target="_blank" href="/platform/feedbacklist.html" class="service-wrapper">
                    <div class="service-icon"></div> 
                    <div class="toolbar-title">建议</div>
                </a>
                <div class="scroll-top-wrapper">
                    <div class="scroll-icon"></div> 
                    <div class="toolbar-title">顶部</div>
                </div>
            </div>
        </div>
        <!--建议 返回顶部 end-->

    </div>
</template>

<script>

import Pagination from "../../components/Pagination"
import MySwiper from "../../components/MySwiper"
import {mapGetters} from "vuex"
import SideNavgation from "../../components/SideNavgation"
export default {
  name: 'Home',
  components: {
      Pagination,
      MySwiper,
      SideNavgation 

  },
  data(){
      return {
          isShow: false,
      }
  },
  mounted(){
    this.getcitylist();  
    this.getalltypelist();
    this.getmanzhanlist();
  },
  methods: {
    showCity(){
        this.isShow = !this.isShow
    },
    getcitylist(){
        this.$store.dispatch("citylist");
    },
    getalltypelist(){
        this.$store.dispatch("alltypelist");
    },
    getmanzhanlist(){
        this.$store.dispatch("manzhanlist");

    }
  },
  computed: {
      ...mapGetters(["citylist","alltypelist","manzhanlist"]),

  }
   
}
</script>

<style>
#app {
    width: 100%;
    height: 100%
}



.selector-wrapper {
    width: 100%;
    height: 120px;
    background: #fff
}

.selector-wrapper a {
    color: #99a2aa
}

.selector-wrapper .wrapper a:hover {
    color: #f25d8e
}

.selector-wrapper .wrapper {
    width: 1160px;
    height: 40px;
    border-bottom: 1px dashed #e5e9ef;
    margin: 0 auto;
    box-sizing: border-box;
    line-height: 40px;
    position: relative
}

.selector-wrapper .title {
    float: left;
    width: 90px;
    font-size: 12px;
    color: #99a2aa;
    letter-spacing: 0
}

.selector-wrapper .selector-content {
    float: left
}

.selector-wrapper .selector-content>ul>li {
    height: 40px;
    float: left;
    line-height: 40px
}

.selector-wrapper .city-selector-wrapper .selector-content>ul>li {
    width: 90px
}

.selector-content .city-list>li>a {
    display: inline-block;
    color: #99a2aa
}

.selector-wrapper .city-list {
    font-size: 12px;
    letter-spacing: 0;
    line-height: 14px;
    display: -ms-flexbox;
    display: flex
}

.selector-wrapper .city-list .first {
    width: 90px;
    padding: 0;
    margin: 0
}

.selector-wrapper .selector-content .city-list .more {
    position: absolute;
    right: 0
}

#moreCity .moreCityName {
    display: block;
    color: #f25d8e
}

#moreType {
    margin-right: 8px
}

#moreType .moreTypeName {
    display: block;
    color: #f25d8e
}

.selector-wrapper .city-list .active a {
    color: #f25d8e
}

.selector-wrapper .more-city-wrapper {
    position: absolute;
    overflow: hidden;
    width: 414px;
    height: 165px;
    right: 0;
    top: 41px;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px #afafaf;
    display: block;
    z-index: 1;
    background: #fff
}


.more-city-letter-list {
    width: 374px;
    height: 31px;
    box-sizing: border-box;
    margin: 9px 20px 0 20px;
    border-bottom: 1px solid #ddd
}

.more-city-letter-list ul {
    width: 374px;
    height: 15px;
    line-height: 15px
}

.more-city-letter-list ul li {
    box-sizing: border-box;
    float: left;
    height: 31px;
    line-height: 31px;
    margin-right: 25px;
    padding: 8px 0
}

.more-city-letter-list ul .active {
    color: #f25d8e;
    border-bottom: 2px solid #f25d8e
}

.more-city-list {
    width: 374px;
    height: 110px;
    margin: 9px 20px 0 20px;
    overflow: auto
}

.more-city-list>ul {
    display: block
}

.more-city-list ul li {
    float: left;
    width: 71px;
    height: 15px;
    padding: 6px 0
}

.type-selector-wrapper .selector-content>ul>li {
    height: 100%;
    width: auto;
    padding-right: 10px;
    margin-right: 18px
}

.selector-wrapper .more-type-wrapper {
    position: absolute;
    overflow: hidden;
    width: 369px;
    height: 80px;
    right: -19px;
    top: 41px;
    border: 1px solid #ddd;
    box-shadow: 0 0 5px #afafaf;
    display: none;
    z-index: 1;
    background: #fff
}

.selector-wrapper .more-type-wrapper li {
    padding-left: 21px;
    float: left;
    width: 102px;
    height: 14px
}

.order-selector-wrapper li {
    width: 140px;
    height: 14px
}

.project-list-wrapper {
    width: 1160px;
    /* height: 2431px; */
    margin: 0 auto
}

.project-list {
    width: 100%;
    /* height: 2431px */
}

.project-list-wrapper .project-list li {
    float: left
}

.project-list-wrapper .project-list li:nth-of-type(even) {
    margin-right: 0
}

.project-list-wrapper .project-list .margin0 {
    margin-right: 0
}

.project-list-item {
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    margin-top: 60px;
    margin-right: 40px;
    width: 560px;
    height: 237px;
    background: #fff;
    box-shadow: 0 0 15px 0 rgba(108, 116, 122, .09);
    border-radius: 8px;
    float: left;
    transition: transform .2s
}

.project-list .project-list-item .project-list-item-img {
    transition: transform .1s;
    background: #fff;
    box-shadow: 3px 3px 2px 0 rgba(108, 116, 122, .3);
    border-radius: 8px;
    left: 20px;
    bottom: 24px;
    position: absolute;
    width: 175px;
    height: 233px
}

.project-list .project-list-item .project-list-item-img img {
    width: 100%;
    height: 100%;
    border-radius: 8px
}

.project-list .project-list-item .project-list-item-detail .project-list-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    margin-top: 30px;
    width: 286px;
    height: 48px;
    font-size: 18px;
    color: #222;
    letter-spacing: 0;
    line-height: 24px
}

.project-list .project-list-item .project-list-item-detail {
    margin-left: 223px
}

.project-list-item-detail .project-list-item-time {
    margin-top: 19px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 17px;
    font-size: 14px;
    color: #999
}

.project-list-item-time .fa {
    margin-right: 8px;
    margin-top: 1px
}

.project-list-item:hover {
    box-shadow: 0 15px 20px 0 rgba(108, 116, 122, .4)
}

.project-list-item:hover .project-list-item-img {
    top: -30px
}

.project-list-item-detail .project-list-item-address {
    margin-top: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 17px;
    font-size: 14px;
    color: #999
}

.project-list-item-address .fa {
    margin-right: 8px;
    margin-top: 1px
}

.project-list-item-detail .project-list-item-price {
    display: flex;
    align-items: flex-end;
    margin-top: 40px;
    color: #f25d8e
}



.toolbar-wrapper {
    z-index: 10;
    width: 78px;
    background: #fff;
    box-shadow: 0 2px 22px 0 rgba(214, 186, 216, .5);
    border-radius: 12px;
    position: fixed;
    bottom: 100px;
    right: 60px;
    text-align: center;
    color: #f25d8e;
    font-size: 12px
}

.left-slider-wrapper {
    width: 100%
}

.left-slider-wrapper .service-wrapper {
    display: none;
    color: #f25d8e;
    width: 100%;
    height: 65px;
    margin-top: 15px
}

.toolbar-wrapper .service-icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    background-image: url(../../assets/images/advise.png)
}

.left-slider-wrapper .scroll-top-wrapper {
    display: none;
    width: 100%;
    height: 65px;
    transform: translate3d(0, 0, 0);
    transition: all .55s ease 0s
}

.toolbar-wrapper .scroll-icon {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: auto;
    background-image: url(../../assets/images/top.png)
}

.left-slider-wrapper .toolbar-title {
    margin: 4px 0 15px 0
}




</style>
